<script lang="ts">
import {Vue, Component, Emit, Inject, Watch, Prop} from 'vue-property-decorator';
import ApplyInfo from "./ApplyInfo.vue";
import AuditInfo from "./AuditInfo.vue";
import EventBus from "../../eventBus/event";
import {AuditRequestFields, BusinessType} from "../../type";
@Component({name: "checkFields", components: {ApplyInfo, AuditInfo}})
export default class CheckFields extends Vue {
  @Prop({type:Function, default: ()=>{}})getField!:Function

  submitAudit(){
    if(this.auditType.auditType === 'add' || this.auditType.auditType === 'edit'){
      //@ts-ignore
      this.$refs.auditInfo.validate().then((res:any) => {
        EventBus.$emit("submitAudit");
      }).catch((err:any )=> {
        console.log(err)
      })
    }else{
      EventBus.$emit("submitAudit");
    }
  }
  auditContentData:AuditRequestFields = <any>{}
  @Inject("businessType")
  businessType!: BusinessType;

  @Inject("auditType")
  auditType!: any

  @Inject('modeType') injectedModeType!: {mode: string};
  
  @Emit("update")
  handleUpdate(value: AuditRequestFields){
    return {type: this.businessType.businessType, data: value}
  }

  @Watch("auditContentData", {immediate: true, deep: true})
  handleAuditContentData(value:AuditRequestFields){
    this.handleUpdate(value)
  }

  cancelDialog(){
    EventBus.$emit("closeModal");
  }

}
</script>

<template>
  <div class="cc-check-content-wrapper">
    <div class="cc-check-content-wrapper_inner">
      <div class="cc-check-content__info">
        <div class="cc-check-content__info__text">申请</div>
        <ApplyInfo ref="ApplyInfo"/>
      </div>
      <div class="cc-check-content__audit">
        <div class="cc-check-content__info__text">审批</div>
        <AuditInfo v-model="auditContentData" :audit-type="auditType.auditType" :getField="getField"  ref="auditInfo"></AuditInfo>
      </div>
    </div>

    <div v-if="injectedModeType.mode != 'preview'" style="height: 50px;border-top: 1px solid #f0f0f0;padding-top: 5px; display: flex; align-items: center;justify-content: right" class="cc-check-content__buttons">
      <el-button type="default" @click="cancelDialog" :disabled="injectedModeType.mode == 'preview'">取消</el-button>
      <el-button type="primary" @click="submitAudit" :disabled="injectedModeType.mode == 'preview'">确定</el-button>
    </div>
  </div>
</template>

<style scoped lang="scss">

.cc-check-content-wrapper{
  background-color: #fff;
  height: calc(100% - 10px);
  .cc-check-content-wrapper_inner{
    height: calc(100% - 60px);
    padding: 0 10px;
    overflow-y: scroll;
  }
  .cc-check-content-wrapper_inner::-webkit-scrollbar{
    width: 6px;
  }
  .cc-check-content-wrapper_inner::-webkit-scrollbar-track{
    background: #fff;
  }
  .cc-check-content-wrapper_inner::-webkit-scrollbar-thumb{
    background: #C0C4CC;
    border-radius: 3px;
  }
  .cc-check-content__info{
    border-bottom: 1px solid #f3f3f3;
  }
  .cc-check-content__info__text{
    font-weight: 700;
    text-align: left;
    font-size: 14px;
    padding: 10px 0;
  }
}
::v-deep .cc-check-content__buttons{
  padding-right: 10px;
  .el-button{
    padding: 7px 15px;
    line-height: 17px;
  }
}
</style>